<template>
  <div class="stem_warpper">
    <!-- 是否是必填 -->
    <template v-if="require">
      <span class="require_red">*</span>
    </template>
    <!-- 标题 -->
    {{ `${questNum}. ` }}
    <div class="edit_html" v-html="title"></div>

    <template v-if="extraName">
      <span class="extra_name">{{ `[${extraName}]` }}</span>
    </template>
  </div>
</template>
<script lang="ts">
import { defineComponent } from 'vue';
export default defineComponent({
  components: {},
  props: {
    require: { type: Boolean, default: true },
    questNum: { type: Number, default: 0 },
    title: { type: String, default: '' },
    /** 题目列表 */
    extraName: { type: String, default: '' },
  },
  setup() {
    return {};
  },
});
</script>
<style lang="less" scoped>
.stem_warpper {
  font-size: 15px;
  color: #444444;
  font-weight: bold;
  display: flex;
  .require_red {
    color: red;
    font-weight: bold;
  }
  .edit_html {
    :global(p) {
      padding: 0;
      margin: 0;
    }
  }
  .extra_name {
    color: #999;
    font-weight: normal;
    font-size: 14px;
    padding-left: 5px;
  }
}
</style>
